<template>
	<div class="bg-white">
		<Form ref="deptForm" :model="dept" :label-width="80">
			<div class=" shadow p-3 mb-3 radius text-xs text-secondary">
				<FormItem class="" label="部门名称" prop="name">
					<Input v-model="dept.name" @on-blur="select" show-word-limit placeholder="请输入部门名称" clearable
						maxlength="32">
					</Input>
				</FormItem>
			</div>
			<FormItem class="text-right ">
				<Button class="mt-3 ml-2" @click="submit" type="primary">提交</Button>
			</FormItem>
		</Form>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				dept: {
					deptId: null, //部门表添加的部门编号
					name: "", //部门表添加的部门名称
					empId: null, //部门表添加的负责人
				},

			}
		},
		created: function() {},
		methods: {
			//将输入的数据向后端提交
			submit: function() {
				if (this.dept.name.length == 0) {
					this.message.error("请输入部门名称")
				} else if (!this.dept.name.match(/^[\u4e00-\u9fa5]{1,32}$/)) {
					this.message.error("部门名称必须为32位以内的汉字")
				} else if (this.dept.name.length < 3) {
					this.message.error("部门名称长度应大于三位")
				} else {
					this.http.get({
						url: "/dept/all",
						param: {
							name: this.dept.name
						}
					}).then(res => {
						console.log(res)
						if(res.length > 0){
							this.message.error("该部门名称已被使用")
						}else{
							this.http.post({
							
								url: "/dept/info",
								param: {
									dept: JSON.stringify(this.dept)
								},
							
							}).then(res => {
								this.message.info("新增成功");
							
								this.$router.detail.close();
							});
						}
					})
					
				}
			},
			select: function() {
				if(this.dept.name.length >= 3 && this.dept.name.match(/^[\u4e00-\u9fa5]{1,32}$/)){
					this.http.get({
						url: "/dept/all",
						param: {
							name: this.dept.name
						}
					}).then(res => {
						console.log(res)
						if(res.length > 0){
							this.message.error("该部门名称已被使用")
						}else{
							this.message.info("该部门名称可用");
						}
					})
				}
				
			}
		},
	}
</script>
<style>

</style>